@use "sass:math";
@import '../common/variable', '../common/transition', '../common/wave-effect';

$height: 20px;
$core-height: $height - 4px;
.tulp-switch {
  cursor: pointer;
  width: $height*2;
  height: $height;
  border: none;
  // 语法参考: https://sass-lang.com/documentation/breaking-changes/slash-div
  border-radius: math.div($height, 2);
  background-color: rgba(0, 0, 0, 0.14);
  transition: background-color 0.25s;
  transition: $_background-transition, $_box-shadow-transition;
  position: relative;
  --ripple-color: #415fcc;
  &:focus {
    outline: none;
    box-shadow: $_wave-box-shadow;
  }
  &:hover {
    box-shadow: none;
  }
  &:active {
    > .tulp-switch-core {
      width: $core-height + 4px;
    }
  }
  &.tulp-switch--checked {
    background-color: #415fcc;
    & > .tulp-switch-core {
      left: calc(100% - #{$core-height} - 2px);
    }
    &:focus {
      box-shadow: $_wave-active-box-shadow;
    }
    &:hover {
      box-shadow: none;
    }
    &:active > .tulp-switch-core {
      width: $core-height + 4px; margin-left: -4px;
    }
  }
}
.tulp-switch-core {
  width: $core-height;
  height: $core-height;
  border-radius: math.div($core-height, 2);
  background-color: #fff;
  box-shadow: 0 2px 4px #00230b33;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left $_transition-duration, margin-left $_transition-duration, width $_transition-duration;
}

.tulp-switch-wave {
  @include wave-effect;
  &.active {
    animation-name: large-wave-spread, large-wave-opacity
  }
}